<template>
	<div class="comment">
		<div class="login"><OAuthLogin></OAuthLogin></div>

		<div class="">
			<div class="comment-input">
				<div class="avatar"><Avatar icon="ios-person" size="large" :src="userInfo.avatar" /></div>
				<Input type="textarea" :disabled="!userInfo.userId" v-model="commentForm.content" :maxlength="100" show-word-limit placeholder="评论一下吧~" />
				<Button type="info" class="comment-btn" @click="doComment">评论</Button>
			</div>
			<div class="comment-content" v-for="comment in comments" :key="comment.id">
				<div class="avatar"><Avatar icon="ios-person" size="large" :src="comment.senderAvatar" /></div>
				<div class="comment-content-data">
					<div class="comment-first">
						<h3 class="coment-name" style="padding-bottom: 5px;">{{ comment.senderName }}</h3>
						<p class="coment-reply-info">{{ comment.content }}</p>
						<div class="info">
							<span class="time"><Time :time="comment.createTime" type="relative" /></span>
							<Tag :color="comment.senderOauth ? 'default' : 'success'">{{ comment.senderOauth || '内测用户' }}</Tag>
							<span class="reply " @click="toReply(comment)">回复</span>
						</div>
					</div>
					<div class="comment-reply" v-for="reply in comment.children" :key="reply.id">
						<div class="reply-avatar"><Avatar icon="ios-person" size="small" :src="reply.senderAvatar" /></div>
						<div class="reply-con">
							<div class="comment-reply-data">
								<h4 class="reply-name">{{ reply.senderName }}</h4>
								<div class="reply-receiver" v-show="reply.receiver != comment.sender">
									<span>回复</span>
									<h4 class="reply-name">@{{ reply.receiverName }}</h4>
								</div>
								<p class="coment-reply-info reply-info">{{ reply.content }}</p>
								<div style="clear: both;"></div>
							</div>
							<div class="info">
								<span class="time"><Time :time="comment.createTime" type="relative" /></span>
								<Tag :color="reply.senderOauth ? 'default' : 'success'">{{ reply.senderOauth || '内测用户' }}</Tag>
								<span class="reply " @click="toReply(comment, reply)">回复</span>
							</div>
						</div>
					</div>
					<div class="comment-input" v-show="comment.checked">
						<div class="avatar"><Avatar icon="ios-person" size="large" :src="userInfo.avatar" /></div>
						<Input type="textarea" :disabled="!userInfo.userId" v-model="replyForm.content" :maxlength="100" show-word-limit :placeholder="replyPlaceholder" />
						<Button type="info" class="comment-btn" @click="doReply">评论</Button>
					</div>
				</div>
			</div>
		</div>

		<div class="social-section"></div>
	</div>
</template>

<script>
import { oauth2login } from '@/api/user';
import OAuthLogin from '@/components/common/OAuthLogin.vue';
import { mapGetters } from 'vuex';
import { listTreeArticleComment, addYrComment } from '@/api/yrcomment';
export default {
	components: {
		OAuthLogin
	},
	name: 'YRComment',
	props: {
		articleId: {
			type: Number
		}
	},
	computed: {
		...mapGetters({
			userInfo: 'user/userInfo'
		})
	},
	created() {
		this.getTreeArticleComment();
	},
	data() {
		return {
			options: {},
			comments: [],
			commentForm: {
				pid: 0,
				content: ''
			},
			replyForm: {
				receiver: '',
				receiverAvatar: '',
				receiverName: '',
				pid: 0,
				content: ''
			},
			replyPlaceholder: ''
		};
	},
	watch:{
		'articleId' (){
			this.getTreeArticleComment();
		}
	},
	methods: {
		login(type) {
			oauth2login(type);
		},
		getTreeArticleComment() {
			listTreeArticleComment(this.articleId).then(res => {
				if (res.data) {
					this.comments = res.data.map(e => {
						e.checked = false;
						return e;
					});
				}
			});
		},
		toReply(comment, reply) {
			if (reply) {
				this.replyForm.receiver = reply.sender;
				this.replyForm.receiverAvatar = reply.senderAvatar;
				this.replyForm.receiverName = reply.senderName;
				this.replyPlaceholder = `回复 @${reply.senderName}: `;
			} else {
				this.replyForm.receiver = comment.sender;
				this.replyForm.receiverAvatar = comment.senderAvatar;
				this.replyForm.receiverName = comment.senderName;
				this.replyPlaceholder = `回复 @${comment.senderName}: `;
			}
			this.replyForm.pid = comment.id;
			this.comments.forEach(e => (e.checked = false));
			comment.checked = true;
		},
		doReply() {
			if (!this.replyForm.content) {
				this.$Message.error({
					background: true,
					content: '请输入回复内容！'
				});
				return;
			}
			this.replyForm.articleId = this.articleId;
			addYrComment(this.replyForm).then(res => {
				if (res.code == 200) {
					this.$Message.success({
						background: true,
						content: '回复成功！'
					});
					this.getTreeArticleComment();
					this.replyForm.content = '';
				}
			});
		},
		doComment() {
			if (!this.commentForm.content) {
				this.$Message.error({
					background: true,
					content: '请输入评论内容！'
				});
				return;
			}
			this.commentForm.articleId = this.articleId;
			addYrComment(this.commentForm).then(res => {
				if (res.code == 200) {
					this.$Message.success({
						background: true,
						content: '评论成功！'
					});
					this.getTreeArticleComment();
					this.commentForm.content = '';
				}
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.comment
	margin-top 15px
	background-color #fff
	padding 10px 20px 30px
	border-radius 10px
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.login
		padding 20px 0
	.comment-input
		display flex
		justify-content flex-start
		align-items center
		margin-top 10px
		.avatar
			margin-right 20px
		.comment-btn
			height 50px
			width 60px
			margin-left 10px
	.comment-content
		display flex
		justify-content flex-start
		margin-top 20px
		.avatar
			margin-right 20px
			padding 25px 0px 0px
		.comment-content-data
			flex 1
			.comment-first
				padding-top 15px
				border-top 1px solid #e5e9ef
				flex 1
			.comment-reply
				display flex
				margin-top 15px
				.reply-avatar
					margin-right 10px
					margin-top -1px
				.reply-con
					.comment-reply-data
						.reply-receiver
							display flex
							float left
							span
								padding-right 10px
							h4
								color #6bc5e2
						.reply-name
							margin-right 10px
							float left
			.comment-input
				.avatar
					padding 0px
.reply-name, .coment-name
	cursor pointer
	color #6d757a !important
.info
	color #99a2aa
	font-size 12px
	margin-top 3px
	display flex
	align-items center
	.time
		padding-right 10px
	.reply
		border-radius 4px
		margin-right 15px
		margin-left 5px
		cursor pointer
		display inline-block
		padding 1px 3px
	.reply:hover
		color #00a1d6
		background #e5e9ef
.coment-reply-info
	font-family Avenir, Helvetica, Arial, sans-serif
	font-size 14px
	color #222
.comment .ivu-tag
	display inline-block
	height 14px
	line-height 14px
	padding 0 4px
	border-radius 3px
	font-size 12px
	opacity 0.8
.comment .ivu-btn-info
	color #fff
	background-color #a6d595
	border-color #a6d595
.comment .ivu-btn-info:focus
	box-shadow 0 0 0 2px rgba(183, 228, 193, 0.39)
</style>
